<template>
    <!-- 过渡动画 -->
    <transition name="fade">
        <div class="img-view" @click="bigImg">
            <!-- 遮罩层 -->
            <div class="img-layer"></div>
            <div class="img">
                <!--loading-->
                <div class="loading_con" v-show="!imgend">
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin-clockwise">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--loading end-->
                <img id="mainimg" :src="imgSrc+'?cmd=imageprocess/processtype/2/quality/100/width/600'" v-show="imgend">
            </div>
        </div>
    </transition>
</template>
<script>
    import "../assets/libs/loading.css"

    export default {
        props: ['imgSrc'],
        data: function () {
            return {
                imgend: false,
            }
        },
        mounted: function () {
            let that = this;
            document.getElementById("mainimg").onload = function () {
                that.imgend = true;
            }
        },
        methods: {
            bigImg() {
                // 发送事件
                this.$emit('clickit')
            }
        }
    }
</script>
<style scoped>
    /*动画*/
    .fade-enter-active,
    .fade-leave-active {
        transition: all .2s linear;
        transform: translate3D(0, 0, 0);
    }

    .fade-enter,
    .fade-leave-active {
        transform: translate3D(100%, 0, 0);
    }

    /* bigimg */

    .img-view {
        position: fixed;
        z-index: 999999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    /*遮罩层样式*/
    .img-view .img-layer {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .img-view .img {
        height: 100%;
        width: 100%;
    }

    /*不限制图片大小，实现居中*/
    .img-view .img img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1000;
        object-fit: contain;
    }

    .loading_con {
        position: absolute;
        width: 100%;
        height: 90px;
        bottom: 50%;
        z-index: 1000;
    }

    .loading_con .item {
        position: relative;
        width: 25%;
        height: 90px;
        text-align: center;
        transition: all 250ms linear;
        margin: 0 auto;
    }



    .loading_con .item .item-inner {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
    }

</style>